import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class SoVideoPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoVideoPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoVideoPage {
    if (!SoVideoPage.instance) {
      SoVideoPage.instance = new SoVideoPage()
    }
    return SoVideoPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  hideSearchStyles(): string {
    return `
    .so-search__input.has-sug {
      border-radius: 10px 0 0 10px !important;
      border-bottom: 2px solid #0fb264 !important;
    }
    
    .so-suggest {
      display: none !important;
    }
    `
  }

  getMainStyles(): string {
    return `
  /* 搜索历史隐藏、搜索建议隐藏 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    form.so-search__form {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史隐藏、搜索建议显示 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
    /* 无搜索建议 */
    form.so-search__form[${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史显示、搜索建议隐藏 */
  &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    /* 无搜索历史 */
    form.so-search__form[${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }

  /* 主样式 */  
  #app {
    background-color: transparent !important;
    
    /* 顶部菜单 */
    .so-header {
      background-color: transparent !important;
      
      .so-header__content {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
      }
      
      .so-header__left {
        .so-search__form {
          .so-suggest {
            .so-suggest__item {
              /* 搜索历史高亮 */
              &.history {
                .so-suggest__text {
                  color: var(${this.themeVarService.search.history.text}) !important;
                  
                  &:has(> b) {
                    color: var(${this.themeVarService.em.text}) !important;
                  }
                  
                  span, b {
                    color: var(${this.themeVarService.search.history.text}) !important;
                  }
                }
              }
              
              /* 搜索建议高亮 */
              &.suggest {
                .so-suggest__text {
                  color: var(${this.themeVarService.search.suggestions.text}) !important;
                  
                  &:has(> b) {
                    color: var(${this.themeVarService.em.text}) !important;
                  }
                }
              }
            }
          }
        }
      }
      
      .so-header__right {
        .so-header-menu {
          .header__append-item {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
              text-decoration: none !important;
            }
          }
          
          .so-header-menu-item__submenu {
            background-color: transparent !important;
          }
        }
      }
    }
    
    /* 搜索分类 */
    .nav {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      background-color: transparent !important;
      border-bottom: none !important;
      
      ul {
        padding: 0 !important;
        
        li {
          &.activated-tab {
            &::after {
              background-color: var(${this.themeVarService.tab.textActive}) !important;
            }
            
            a {
              color: var(${this.themeVarService.tab.textActive}) !important;
            }
          }
          
          a {
            color: var(${this.themeVarService.tab.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.tab.textHover}) !important;
            }
          }
        }
      }
    }
    
    .body {
      padding: 0 !important;

      /* 搜索结果列表*/
      .v-list {
        ${this.searchCommonStyles.resultContainerStyles({ columns: 4 })}
        
        /* 非结果项 */
        > li:not(.v-list-item) {
          grid-column: 1 / -1;
          grid-row: auto;
          
          .v-recom__title {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
          
          .v-item__title {
            color: var(${this.themeVarService.link.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.textHover}) !important;
              text-decoration: none !important;
            }
          }
          
          &:has([data-so-mod="list-like"]) {
            display: none;
          }
        }

        /* 搜索结果项 */
        > li.v-list-item {
          ${this.searchCommonStyles.resultItemStyles()}
          margin: 0 !important;
          
          /* 标题 */
          .v-item__title, .v-cm__title {
            color: var(${this.themeVarService.link.default.text}) !important;
            
            &:hover {
              text-decoration: none !important;
            }
          }
          
          [data-so-mod="list-ad"] {
            .v-cm__title {
              &::before {
                content: 'AD';
                background-color: var(${this.themeVarService.message.warning.textPrimary}) !important;
                color: white !important;
                padding: 2px 5px !important;
                border-radius: 4px !important;
                margin-right: 4px !important;
              }
            }
            
            .v-cm__extra {
              display: none !important;
            }
          }
        }
      }
      
      /* 尾部提示 */
      .v-tail {
        width: 100% !important;
      
        .v-tail__prefix {
          background-color: transparent !important;
        
          &::before {
            background-color: transparent !important;
          }
        }

        .v-tail__text {
          color: var(${this.themeVarService.message.warning.textPrimary}) !important;
        }
        
        .v-tail__suffix {
          background-color: transparent !important;
          
          &::before {
            background-color: transparent !important;
          }
        }
      }
    }
    
    /* 页脚 */
    .footer {
      background-color: transparent !important;
      text-align: center !important;
      
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
        text-decoration: none !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
          text-decoration: none !important;
        }
      }
    }
  }  
    `
  }
}
